<template>
  <image :src="iconUrl" :style="[iconStyle]" class="ve-icon" mode=""></image>
</template>

<script>
  export default {
    props: ['name', 'width', 'height', 'size', 'block'],
    data() {
      if (this.name == null) return
      return {
        iconUrl: '/static/icons/' + this.name + '.png',
      }
    },
    computed: {
      iconStyle() {
        const widthVal = this.size || this.width || 26
        const height = uni.upx2px(this.height || widthVal) + 'px'
        const width = uni.upx2px(widthVal) + 'px'

        return {
          width,
          height,
          display: this.block ? 'block' : 'inline-block',
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .ve-icon {
    display: inline-block;
    flex-shrink: 0;
  }
</style>
